<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
    <script src="./turf.min.js"></script>
    <script src="./lodash.min.js"></script>
</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>


    <script type="text/javascript">
        let aaa
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
        const viewer = new Cesium.Viewer('map', {
        });
        // 开启帧率
        viewer.scene.debugShowFramesPerSecond = true;
        // 深度监测
        viewer.scene.globe.depthTestAgainstTerrain = true;

        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(98.71707797694049, 27.677299704639537, 60000.0)
        });

        // 点缓冲
        var point = turf.point([98.71707797694049, 27.677299704639537]);
        var buffered = turf.buffer(point, 2, { units: 'kilometers' });
        var pointBufferJson = buffered.geometry.coordinates[0];
        console.log(pointBufferJson)
        viewer.entities.add({
            name: "最简单的贴地面",
            polygon: {                                    // lodash把二维数组压成一维数组
                hierarchy: Cesium.Cartesian3.fromDegreesArray(_.flatten(pointBufferJson)),
                material: Cesium.Color.RED.withAlpha(0.5),
            },
        });

        // 贴地线
        var hello = viewer.entities.add({
            name: 'hello world',
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray([98.676842346815, 27.571578111198868,
                    98.86252156624968, 27.77444519911974,
                    98.76756234288729, 27.800244194152533]),
                width: 3,
                material: Cesium.Color.RED,
                clampToGround: true,//贴地画线
            }
        });

        // 线缓冲1
        var line = turf.lineString([[98.676842346815, 27.571578111198868], [98.86252156624968, 27.77444519911974], [98.76756234288729, 27.800244194152533]]);
        var buffered = turf.buffer(line, 0.5, { units: 'kilometers' });
        var pointBufferJson = buffered.geometry.coordinates[0];
        viewer.entities.add({
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArray(_.flatten(pointBufferJson)),
                material: Cesium.Color.BLUE.withAlpha(0.5),
            },
        });
        // 线缓冲2
        var buffered2 = turf.buffer(line, 0.7, { units: 'kilometers' });
        var pointBufferJson = buffered2.geometry.coordinates[0];
        viewer.entities.add({
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArray(_.flatten(pointBufferJson)),
                material: Cesium.Color.YELLOW.withAlpha(0.5),
            },
        });
    </script>
</body>

</html>